import { reactive } from 'vue'
import { CEventEnum } from '~/enum/CEventEnum'

export enum ThemeEnum {
    'light' = 'light',
    'dark' = 'dark'
}

const Theme = reactive({
    use: 'light' as ThemeEnum,
    getFun: (prop: any): any => {
        return typeof prop == 'function' ? Theme.getFun(prop()) : prop
    },
    change: (name: ThemeEnum = ThemeEnum.light) => {
        let app: any = document.getElementsByTagName('body')[0]
        app.className = name + '-theme'

        Theme.use = name
        CEvent.emit(CEventEnum.changeTheme, Theme.use)
    },
    chart: {
        /**
         * 线图
         */
        colors1Obj: {
            [ThemeEnum.light]: () => ['#{light.c-blue}'],
            [ThemeEnum.dark]: () => ['#{dark.c-blue}']
        },
        getColor1: () => () => Theme.chart.colors1Obj[Theme.use](),

        /**
         * 字体颜色-饼图字体颜色
         */
        fontColor1Obj: {
            [ThemeEnum.light]: () => '#{light.c-text-primary}',
            [ThemeEnum.dark]: () => '#{dark.c-text-primary}'
        },
        getFontColor1: () => () => Theme.chart.fontColor1Obj[Theme.use]()
    }
})

Theme.change()

export default Theme
